<template>
  <div>
    <a-modal :visible="visible" :footer="false" @before-open="open" @ok.stop="visible = false" @cancel="cancel" :align-center="false" title-align="start" width="800px" :mask-closable="false">
      <template #title> 调拨单详情 </template>
      <div>
        <a-row>
          <a-col :span="8">
            <span class="common-text">调拨单号：</span>
            <span>{{ detailInfo.billNo }}</span>
          </a-col>
          <a-col :span="8">
            <span class="common-text">创建人：</span>
            <span>{{ detailInfo.createUname }}</span>
          </a-col>
          <a-col :span="8">
            <span class="common-text">创建时间：</span>
            <span>{{ $setTime(detailInfo.gmtCreate) }}</span>
          </a-col>
        </a-row>
        <a-row style="margin: 10px 0">
          <a-col :span="8">
            <span class="common-text">调拨类型：</span>
            <span v-if="detailInfo.transType == 1">国内仓-国内仓</span>
            <span v-if="detailInfo.transType == 2">国内仓-海外仓</span>
            <span v-if="detailInfo.transType == 3">海外仓-国内仓</span>
            <span v-if="detailInfo.transType == 4">海外仓-海外仓</span>
          </a-col>
          <a-col :span="8">
            <span class="common-text">物流方式：</span>
            <span v-if="detailInfo.logisticType == 1">线下配送</span>
            <span v-if="detailInfo.logisticType == 2">快递</span>
          </a-col>
          <a-col :span="8">
            <span class="common-text">运费：</span>
            <span>{{ detailInfo.logisticFees }}</span>
          </a-col>
        </a-row>
        <a-row style="margin: 10px 0">
          <a-col :span="8">
            <span class="common-text">其他费用：</span>
            <span>{{ detailInfo.otherFees }}</span>
          </a-col>
          <a-col :span="8">
            <span class="common-text">分摊方式：</span>
            <span v-if="detailInfo.feesShareType == 0">不分摊</span>
            <span v-if="detailInfo.feesShareType == 1">按数量</span>
            <span v-if="detailInfo.feesShareType == 2">按金额</span>
          </a-col>
          <a-col :span="8">
            <span class="common-text">物流跟踪号：</span>
            <span>{{ detailInfo.logisticsTrackNumber }}</span>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <span class="common-text">附件：</span>
            <span v-if="detailInfo.attachment" @click="download(detailInfo.attachment)" style="color: #165dff; cursor: pointer">{{ detailInfo.attachment.split('/')[detailInfo.attachment.split('/').length - 1] }}</span>
          </a-col>
          <a-col :span="16">
            <span class="common-text">备注：</span>
            <span>{{ detailInfo.remark }}</span>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <div class="title-bar">调出</div>
            <div>
              <span class="common-text">调出仓：</span>
              <span>{{ detailInfo.outWarehouseName }}</span>
            </div>
            <div>
              <span class="common-text">店铺：</span>
              <span>{{ detailInfo.shopName ? detailInfo.shopName : '--' }}</span>
            </div>
            <div>
              <span class="common-text">货主：</span>
              <span>{{ detailInfo.ownerName ? detailInfo.ownerName : '--' }}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="title-bar">调入</div>
            <div>
              <span class="common-text">调入仓：</span>
              <span>{{ detailInfo.inWarehouseName }}</span>
            </div>
            <div>
              <span class="common-text">店铺：</span>
              <span>{{ detailInfo.inShopName }}</span>
            </div>
            <div>
              <span class="common-text">货主：</span>
              <span>{{ detailInfo.inOwnerName ? detailInfo.inOwnerName : '--' }}</span>
            </div>
          </a-col>
        </a-row>
      </div>
      <div style="margin-top: 10px">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" title="调拨产品">
            <div style="margin-top: 10px">
              <span style="margin-left: 10px; display: inline-block"
                ><span>SKU种类：</span><span>{{ skuKind }}</span></span
              >
              <span style="margin-left: 10px; display: inline-block"
                ><span>调拨数量：</span><span>{{ provocateurNum }}</span></span
              >
              <span style="margin-left: 10px; display: inline-block"
                ><span>总货值：</span><span>￥{{ allPrice }}</span></span
              >
            </div>
            <a-table size="mini" class="table-singe-line" :pagination="false" :scroll="{ y: 400 }" :data="detailInfo.items">
              <template #columns>
                <a-table-column title="店铺" :width="100">
                  <template #cell="{ record }">
                    <a-popover>
                      <p style="width: 100%" class="text-limit">{{ record.shopName }}</p>
                      <template #content>
                        <p>{{ record.warehouseName }}</p>
                      </template>
                    </a-popover>
                  </template>
                </a-table-column>
                <a-table-column title="图片" :width="60">
                  <template #cell="{ record }">
                    <ImgPopover :src="record.productImg">
                      <template #con>
                        <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                      </template>
                    </ImgPopover>
                  </template>
                </a-table-column>
                <a-table-column title="产品名称/SKU" :width="100">
                  <template #cell="{ record, rowIndex }">
                    <a-popover>
                      <p style="color: #619bd8; width: 100%" class="text-limit">{{ record.productName }}</p>
                      <p style="color: #619bd8; width: 100%" class="text-limit">
                        <span>{{ record.sku }}</span>
                      </p>
                      <template #content>
                        <p>{{ record.productName }}</p>
                        <p>{{ record.sku }}</p>
                      </template>
                    </a-popover>
                  </template>
                </a-table-column>
                <a-table-column title="MSKU/FNSKU" :width="100">
                  <template #cell="{ record, rowIndex }">
                    <a-popover>
                      <p style="width: 100%" class="text-limit">
                        {{ record.msku }}
                      </p>
                      <p style="width: 100%" class="text-limit">
                        {{ record.fnsku }}
                      </p>
                      <template #content>
                        <p>{{ record.msku }}</p>
                        <p>{{ record.fnsku }}</p>
                      </template>
                    </a-popover>
                  </template>
                </a-table-column>
                <a-table-column title="库存属性" :width="80">
                  <template #cell="{ record, rowIndex }">{{ record.attribute == 'good' ? '良品' : '次品' }} </template>
                </a-table-column>
                <a-table-column title="可调数量" :width="80">
                  <template #cell="{ record, rowIndex }">{{ record.amtAvailable }} </template>
                </a-table-column>

                <a-table-column title="调拨数量" :width="80">
                  <template #cell="{ record }">
                    {{ record.amt }}
                  </template>
                </a-table-column>
                <a-table-column title="出库仓货位" :width="80">
                  <template #cell="{ record }">
                    {{ record.outLocationCode }}
                  </template>
                </a-table-column>
                <a-table-column title="入库仓货位" :width="80">
                  <template #cell="{ record }">
                    {{ record.inLocationCode }}
                  </template>
                </a-table-column>
                <a-table-column title="单位成本" :width="80">
                  <template #cell="{ record }">
                    {{ record.price }}
                  </template>
                </a-table-column>
                <a-table-column title="货值" :width="120">
                  <template #cell="{ record }">
                    {{ record.value }}
                  </template>
                </a-table-column>
                <a-table-column title="单位费用" :width="80">
                  <template #cell="{ record }">
                    {{ record.unitCost }}
                  </template>
                </a-table-column>
                <a-table-column title="费用" :width="80">
                  <template #cell="{ record }">
                    {{ record.cost }}
                  </template>
                </a-table-column>
                <a-table-column title="总金额" :width="80">
                  <template #cell="{ record }">
                    {{ record.totalAmount }}
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" title="单据日志">
            <a-table size="mini" style="margin-top: 10px" class="table-singe-line" :pagination="false" :scroll="{ y: '400px' }" :data="logList">
              <template #columns>
                <a-table-column title="序号" width="80">
                  <template #cell="{ record, rowIndex }">
                    <div>{{ rowIndex + 1 }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="时间" width="80">
                  <template #cell="{ record, rowIndex }">
                    <div>{{ $setTime(record.gmtCreate) }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="操作人" width="80">
                  <template #cell="{ record, rowIndex }">
                    <div>{{ record.createUname }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="事件" width="80">
                  <template #cell="{ record, rowIndex }">
                    <!-- <div>{{ filterType(record.eventType) }}</div> -->
                    <div>{{ record.eventName }}</div>
                  </template>
                </a-table-column>
                <a-table-column title="描述" width="200">
                  <template #cell="{ record, rowIndex }">
                    <div>{{ record.eventMsg }}</div>
                  </template>
                </a-table-column>
              </template>
            </a-table>
            <div class="pagination-footer" style="margin-top: 10px">
              <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { getTransOrderInfo, findTransOrderLogPage } from '@/api/warehouse'
  import { Message } from '@arco-design/web-vue'
  export default defineComponent({
    props: ['id', 'type'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        detailInfo: {
          items: [],
        },
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        logList: [],
      })

      const open = () => {
        console.log(props)

        getDetailInfo()
        getLog()
      }
      const getDetailInfo = async () => {
        let res: any = {}
        res = await getTransOrderInfo({ id: props.id })

        data.detailInfo = res?.data || {}
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getLog()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getLog()
      }

      const getLog = async () => {
        let params = {
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
          transOrderId: props.id,
        }

        const res: any = await findTransOrderLogPage(params)

        data.pageNation.total = res?.data?.total
        data.logList = res?.data?.records
      }

      const cancel = () => {
        data.pageNation = { total: 0, pageSize: 20, pageNum: 1 }
        data.logList = []
        data.detailInfo = {
          items: [],
        }
        visible.value = false
      }

      const filterType = (val: number) => {
        let text = ''
        switch (val) {
          case 1:
            text = '新建'
            break
          case 2:
            text = '更新'
            break
          case 3:
            text = '删除'
            break
          case 4:
            text = '提交'
            break
          case 5:
            text = '审核'
            break
          case 6:
            text = '驳回'
            break
        }
        return text
      }

      const skuKind = computed(() => {
        let skuArr: any = []
        data.detailInfo.items.forEach((e: any) => {
          let index = skuArr.findIndex((el: any) => el == e.sku || e.msku)
          if (index == -1) {
            skuArr.push(e?.sku || e?.msku)
          }
        })
        return skuArr.length
      })
      const allPrice = computed(() => {
        let allPrice = 0
        data.detailInfo.items.forEach((e: any) => {
          allPrice += e.value
        })
        return allPrice
      })
      const provocateurNum = computed(() => {
        let num = 0
        data.detailInfo.items.forEach((e: any) => {
          num += e.amt
        })
        return num || 0
      })

      const download = (url: string) => {
        let a = document.createElement('a')
        a.href = url
        a.click()
        a.style.display = 'none'
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        skuKind,
        allPrice,
        provocateurNum,
        changePage,
        sizeChange,
        filterType,
        cancel,
        download,
      }
    },
  })
</script>

<style lang="less" scoped>
  .common-text {
    font-size: 12px;
    color: #a39999;
  }
</style>
